<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./dist/vue.js"></script>
</head>
<body>
    <!-- 
        动态组件核心点:
          <component :is="tap"></component>
        keep-alive: 保留组件的状态,避免组件的重新渲染
          kepp-alive 的使用会触发两个钩子函数
          activated ：  被 keep-alive 缓存的组件激活时调用 (该钩子在服务器端渲染期间不被调用)
          deactivated ：被 keep-alive 缓存的组件停用时调用 (该钩子在服务器端渲染期间不被调用)
     -->
    <div id="app">
       <button @click=" tap='my-com1' ">点击切换到组件1</button>
       <button @click=" tap='my-com2' ">点击切换到组件2</button>
       <button @click=" tap='my-com3' ">点击切换到组件3</button>
        <!-- 用 <keep-alive> 标签包裹,三个组件的状态都会被保留-->
        <!-- 如果只想要保存其中几个组件的状态 -->
       <!-- 定义组件时给每个组件添加name属性, 给 <keep-alive> 标签添加include属性,多个属性值用逗号隔开 -->
       <keep-alive include="com1,com2">
            <component :is="tap"></component> <!-- vue中提供的组件  -->  
       </keep-alive>
    </div>
</body>
<template id="com1">
    <div>
        组件1:
        <input type="text" placeholder="组件1">
    </div>
</template>
<template id="com2">
    <div>
        组件2
        <input type="text" placeholder="组件2">
    </div>
</template>
<template id="com3">
    <div>
        组件3
        <input type="text" placeholder="组件3">
    </div>
</template>
<script>
    const Com1={
        template:'#com1',
        name:"com1"  // 添加name属性是为了 keep-alive 中区分要保留哪些组件的状态
    }
    const Com2={
        template:'#com2',
        name:"com2"
    }
    const Com3={
        template:'#com3',
        name:"com3"
    }  
    new Vue({
        el:"#app",
        components:{
            'my-com1':Com1,
            'my-com2':Com2,
            'my-com3':Com3,
        },
        data:{ // 组件中的data才用函数,new Vue中用对象
            tap:'my-com1'
        }
    })
</script>
</html>